<template>
	<view>
		<logo></logo>

		<!-- 注册表单 -->
		<view class="registerBox">
			<view class="registerContent">
				<image src="../../static/img/phone.svg"></image>
				<view class="title">手机号码</view>
				<input class="uni-input" v-model="userInfo.userPhoneNo" maxlength="11" @blur="checkPhone"
					type="number" />
			</view>
			<view class="registerContent">
				<image src="../../static/img/student.svg"></image>
				<view class="title">学号</view>
				<input class="uni-input" v-model="userInfo.stuNo" maxlength="9" type="number" />
			</view>
			<view class="registerContent">
				<image src="../../static/img/user.svg"></image>
				<view class="title">姓名</view>
				<input class="uni-input" v-model="userInfo.userName" @input="hangzi" />
			</view>
			<view class="registerContent">
				<image src="../../static/img/card.svg"></image>
				<view class="title">昵称</view>
				<input class="uni-input" v-model="userInfo.userNickname" />
			</view>
			<view class="registerContent">
				<image src="../../static/img/st-user.svg"></image>
				<view class="title">性别</view>
				<input class="uni-input" v-model="userInfo.userSex" @blur="checkSex" />
			</view>
			<view class="registerContent">
				<image src="../../static/img/lock.svg"></image>
				<view class="title">密码</view>
				<input class="uni-input" v-model="userInfo.userPwd" password="" @blur="checkPwd" />
			</view>

		</view>
		<button class="login" @tap="login">Sign up</button>
	</view>
</template>

<script>
	import logo from "../../components/logo/logo.vue"
	export default {
		data() {
			return {
				userInfo: {
					userPhoneNo: "",
					stuNo: "",
					userName: "",
					userSex: "",
					userPwd: "",
					userNickname: ""
				},
				checkOk: {
					userPhoneNo: false,
					userSex: false,
					userPwd: false
				}
			}
		},
		components: {
			logo
		},

		methods: {
			// 手机号码校验
			checkPhone() {
				if (this.userInfo.userPhoneNo == 0 || this.userInfo.userPhoneNo == "") {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: "请填写您的手机号码",
					// });
					uni.showModal({
						title: '注册失败',
						content: "请填写您的手机号码！",
						showCancel: false,
						confirmText: '确定'
					});
					this.userInfo.userPhoneNo = "";
				} else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(this.userInfo
						.userPhoneNo)) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: "请正确填写您的手机号码",
					// });
					uni.showModal({
						title: '注册失败',
						content: "请正确填写您的手机号码！",
						showCancel: false,
						confirmText: '确定'
					});
					this.userInfo.userPhoneNo = "";
				}else{
					this.checkOk.userPhoneNo = true
				}
			},
			// 性别校验
			checkSex() {
				if (!/^[男|女]{1}$/.test(this.userInfo.userSex)) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: "性别信息输入有误，请按正确格式输入！",
					// });
					uni.showModal({
						title: '注册失败',
						content: "性别信息输入有误，请按正确格式输入！",
						showCancel: false,
						confirmText: '确定'
					});
					this.userInfo.userSex = ""
				}else{
					this.checkOk.userSex = true
				}
			},
			// 密码校验
			checkPwd() {
				if (this.userInfo.userPwd.length == 0 || this.userInfo.userPwd == "") {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: "请输入您的密码！"
					// });
					uni.showModal({
						title: '注册失败',
						content: "请输入您的密码！",
						showCancel: false,
						confirmText: '确定'
					});
				} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.userInfo.userPwd)) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间！"
					// });
					uni.showModal({
						title: '注册失败',
						content: "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间！",
						showCancel: false,
						confirmText: '确定'
					});
				}else{
					this.checkOk.userPwd = true
				}
			},
			// 只能输入行字
			hangzi(e) {
				var value = this.userInfo.userName;
			
				if (!value || value == " ") {
					return '';
				}
				//匹配汉字的正则表达式
				const rule = /[^\u4E00-\u9FA5]/g;
				this.$nextTick(function() {
					this.userInfo.userName = value.replace(rule, '');
				})
			
			},
			// 登录
			async login() {
				console.log(this.checkOk)
				console.log(this.userInfo)
				// uni.navigateTo({
				// 	url:"/pages/login/login"
				// })
				if (this.userInfo.userSex == '女') {
					this.userInfo.userSex = 0
				}
				if (this.userInfo.userSex == '男') {
					this.userInfo.userSex = 1
				}
				
				
				if (this.checkOk.userPhoneNo ==true&& this.checkOk.userSex==true && this.checkOk.userPwd==true) {
					const res = await this.$myRequest({
						url: "/user/register",
						data: this.userInfo,
						method: "POST"
					})
					
					console.log(res.data)
					if (res.data.code == 200) {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					} else {
						uni.showModal({
							title: '注册失败',
							content: res.data.msg,
							showCancel: false,
							confirmText: '确定'
						});
						Object.keys(this.userInfo).forEach(key => this.userInfo[key] = '')
					}

				}

			},
			
			

		},

	}
</script>

<style lang="scss">
	.logoBox {
		display: block;
		width: 100%;
		height: 176px;
		position: relative;
		text-align: center;

		image {
			margin: 0 auto;
			width: 117px;
			height: 109px;
		}

		.logoText {
			position: absolute;
			left: 156px;
			top: 97px;
			font-size: 28px;
			line-height: 30px;
		}

		.prev {
			position: absolute;
			left: 109px;
			top: 148px;
			width: 21px;
			border-bottom: 1px solid black;
		}

		.next {
			position: absolute;
			left: 262px;
			top: 148px;
			width: 21px;
			border-bottom: 1px solid black;
		}

		.logoText1 {
			position: absolute;
			font-size: 16px;
			left: 141px;
			top: 134px;
			line-height: 30px;
			color: rgba(184, 134, 248, 0.83);
		}
	}

	.registerBox {
		display: block;
		position: relative;
		height: auto;

		.registerContent {
			display: block;
			margin-left: 73px;
			margin-bottom: 26px;

			image {
				width: 48px;
				height: 48px;
				float: left;
				margin-right: 16px;
			}
		}


		.title {
			padding-left: 10px;
			font-size: 14px;
			line-height: 21px;
		}

		.uni-input {
			width: 124px;
			border-bottom: 2px solid #000;

		}

	}

	.login {
		float: left;
		margin-left: 73px;
		width: 239px;
		height: 58px;
		color: #FFF;
		line-height: 58px;
		border-radius: 22px;
		background-color: rgba(117, 23, 238, 0.42);
		text-align: center;
	}
</style>
